﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/MyMasterPage.cshtml";
}
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script>
<link href="~/map/style.css" rel="stylesheet" />
<div id="map">
    <section class="banner-section">
        <div class="section-bg" style="background-image: url('assets/img/parallax.jpg');"></div>
        <div class="container">
            <div class="row">
                <div class="page-banner-content col">
                    <h1 class="text-white">服务网点</h1>
                    <span>
                        我们坚信，产品是服务于人和生活的，体验是能够不断优化的。 从第一台奔达的第一次启动，到每一公里的骑行数据都会被铭记。根据这些骑行数据，我们不断优化产品线的分布，满足人们的出行生活；不断改进每一个细节，优化产品的体验；不断发现真正的需求，改变出行的场景。
                        每一公里都不会被遗忘，每一点努力都意义非凡，是科技，让每一公里都算数
                    </span>

                    <!-- breadctumb -->

                </div>
            </div>
        </div>
    </section>
    <div class="w1150">
        <div id="loadingDiv" style=" display:none">
            <div id="over" style=" position: absolute;top: 0;left: 0; width: 100%;height: 100%; background-color: #000;opacity:0.7;z-index: 1000;"></div>
            <div id="layout" style="position: absolute;top: 40%; left: 40%;width: 20%; height: 20%;  z-index: 1001;text-align:center;">
                <img src="/map/loading.gif" /><br />
                <h2 style="color: #fff;">数据加载中....</h2>
            </div>
        </div>

        <div class="video-wrapper">
            <div class="map-top clearfix">
                <div class="location-cur-pos js-cur-position">
                    <span class="location-col-red" id="location-name">【全国】</span> 附近共有<span class="location-col-red" id="store-num">0</span>个服务网点
                </div>
                <div class="location-section form-section js-location-select clearfix" style="display:none;">
                    <div class="xm-select" style="float: left;">
                        <div class="dropdown">
                            <label class="iconfont" for="city">∨</label>
                            <select id="province" class="js-province" name="addr_province">
                                <option value="全国" selected="selected">全国</option>
                                <option value="辽宁省">辽宁省</option>
                                <option value="北京市">北京市</option>
                                <option value="天津市">天津市</option>
                                <option value="山西省">山西省</option>
                                <option value="河北省">河北省</option>
                                <option value="山东省">山东省</option>
                                <option value="上海市">上海市</option>
                                <option value="江苏省">江苏省</option>
                                <option value="浙江省">浙江省</option>
                                <option value="安微省">安微省</option>
                                <option value="重庆市">重庆市</option>
                                <option value="贵州省">贵州省</option>
                                <option value="四川省">四川省</option>
                                <option value="河南省">河南省</option>
                                <option value="福建省">福建省</option>
                                <option value="湖北省">湖北省</option>
                                <option value="湖南省">湖南省</option>
                                <option value="江西省">江西省</option>
                                <option value="广东省">广东省</option>
                                <option value="广西壮族自治区">广西壮族自治区</option>
                                <option value="陕西省">陕西省</option>
                                <option value="甘肃省">甘肃省</option>
                                <option value="内蒙古自治区">内蒙古自治区</option>
                                <option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
                                <option value="青海省">青海省</option>
                                <option value="安徽省">安徽省</option>
                                <option value="广西省">广西省</option>
                                <option value="海南省">海南省</option>
                                <option value="黑龙江">黑龙江</option>
                                <option value="重庆">重庆</option>
                                <option value="新疆省">新疆省</option>
                                <option value="福建">福建</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="location-main">
                <div class="fl location-shop-con">
                    <div class="search-box" style="display: none;">
                        <input class="search-input" id="search_box_input" type="text" placeholder="请输入要检索的线下销售网点信息">
                        <span class="search-icon"></span>
                    </div>
                    <div class="location-shop-detail">
                        <ul class="location-list js-store" id="store-list" style="height:500px;overflow: scroll">
                        </ul>
                        <div class="xm-controls xm-controls-small js-pager-controls" page="1" style="float: left;">
                        </div>
                    </div>
                </div>
                <div class="location-map">
                    <div id="container" style="width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 0; background-color: rgb(243, 241, 236); color: rgb(0, 0, 0); text-align:left;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    console.log("来了老弟")
    var map = new BMap.Map("container");          // 创建地图实例     // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom("海南省", 5);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    map.addControl(new BMap.MapTypeControl());
    $(function () {
        //getNowPos();//开始加载默认地区
        getLocal(0);
        getLevel();
        //省市下拉框查找网点
        $("#province").change(function () {
            var provinceName = $(this).val();
            var myselect = document.getElementById("province");
            var index = myselect.selectedIndex;
            console.log(myselect.options[index].value)
            console.log(myselect.options[index].text)
            $("#location-name").html("【" + myselect.options[index].text + "】");
            getLocal(myselect.options[index].value);
        })

        //根据门店的名称查找网点
        $("span.search-icon").click(function () {
            var content = $("#search_box_input").val();
            if (content == "") {
                alert("请输入线下销售网点的信息");
                return false;
            }
            console.log(content)
            getLocal("content=" + content);
        })
    });

    //搜索框按键查询
    /*$(document).keyup(function (e) {//捕获文档对象的按键弹起事件
        if (e.keyCode == 13) {//按键信息对象以参数的形式传递进来了
            //此处编写用户敲回车后的代码
            $("span.search-icon").click();
        }
    });*/


    function getNowPos() {
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);//标出所在地
                map.panTo(r.point);//地图中心移动
                var point = new BMap.Point(r.point.lng, r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
                var gc = new BMap.Geocoder();
                gc.getLocation(point, function (rs) {
                    var addComp = rs.addressComponents;
                    console.log(addComp)
                    $("#location-name").html("【" + addComp['province'] + "】");
                    $("#province option[value='" + addComp['province'] + "']").attr("selected", true);
                    //getLocal("province="+addComp['province']);
                });
            } else {
                alert('failed' + this.getStatus());
            }
        }, { enableHighAccuracy: true })
    }

    var marker;
    function getLocal(urlData) {
        var result = [];
        var reg = [];
            $.ajax({
                type: 'GET',
                url: '/api/Network/GetListJson',
                data: {},
                success: function (res) {
                    var data = res.Result;
                    for (var i = 0; i < data.length; i++) {
                        reg.push({
                            "id": data[i].Id,
                            "province": data[i].NewsTitle,
                            "area": data[i].NewsTitle,
                            "shopname": data[i].NewsTitle,
                            "shopaddr": data[i].NewsContent,
                            "location": data[i].NewsX + "," + data[i].NewsY,
                            "phone": data[i].NewsTag
                        })
                    }
                    console.log("可以取消了")
                    document.getElementById("loadingDiv").style.display = "none";//loading取消
                    console.log(reg)
                    if (reg.length < 1) {
                        $("#store-list").children().remove();
                        $("#store-list").append("<div style='text-align: center;line-height: 50px;'>暂无搜索的网点</div>");
                        return false;
                    }
                    var storeList = "";
                    $("#store-num").html(reg.length);
                    map.clearOverlays();
                    var pointsView = [];
                    for (var i = 0; i < reg.length; i++) {
                        var n = i + 1;
                        var p = reg[i]['location'].split(',');
                        var point = new BMap.Point(p[0], p[1]);
                        pointsView.push(point);

                        var content = "<p style='font-weight:600'>" + reg[i].shopname + "</p><p style='line-height: 20px;'>电话：" + reg[i].phone + "</p><p style='line-height: 20px;'>地址：" + reg[i].shopaddr + "</p> ";
                        var myIcon = new BMap.Icon("/map/bd1.png", new BMap.Size(21, 33), {
                            offset: new BMap.Size(10, 25), // 指定定位位置
                        });
                        var marker = new BMap.Marker(point, { icon: myIcon });        // 创建标注
                        var label = new BMap.Label(n, {
                            offset: new BMap.Size(0, 3)
                        });
                        label.setStyle({
                            width: '21px', background: 'none', color: '#fff', border: 'none', textAlign: 'center'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
                        });
                        marker.setLabel(label);//显示地理名称 a
                        map.addOverlay(marker);
                        addClickHandler(content, marker);

                        storeList += '<li onclick="to(this,' + i + ',' + p[0] + ',' + p[1] + ',\'' + reg[i].shopname + '\',\'' + reg[i].shopaddr + '\',\'' + reg[i].phone + '\')"><span class="location-num">' + n + '</span><div class="location-addr">'
                            + '<h3>' + reg[i].shopname + '</h3><p class="addr-info">' + reg[i].phone + '</p> <p class="addr-info">' + reg[i].shopaddr + '</p></div>'
                            + '</li>';
                    }
                    //让所有点在视野范围内
                    map.setViewport(pointsView);
                    $("#store-list").children().remove();
                    $("#store-list").append(storeList);
                }
            });
       
        
        // }
    }
    //查找省份
    function getLevel() {
        var that = this
        var selectCount = document.getElementById("province");
        //var selectCount = document.getElementById("province").options;
        $.ajax({
            type: 'GET',
            url: '/SystemManage/Area/GetPageListJson?pageSize=100&pageIndex=1&AreaLevel=1&sortType=Asc',
            data: {},
            success: function (res) {
                that.provinceList = res.Result

                for (var i = 0; i < res.Result.length; i++) {
                    selectCount[i] = new Option(res.Result[i].AreaName, res.Result[i].AreaCode)
                }
            }
        });
    }

    var opts = {
        width: 250,     // 信息窗口宽度
        height: 50,     // 信息窗口高度
        title: "", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };


    //点击将信息内容加入白标注中
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
            marker.setAnimation(null);
            openInfo(content, e);
        }
        );
    }

    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }

    //移动到某一坐标点
    function to(obj, i, x, y, shopname, shopaddr,phone) {
        var allOverlay = map.getOverlays();
        var last = allOverlay.length - 1;
        map.removeOverlay(allOverlay[last]);
        $(obj).addClass("addMove");
        $(obj).siblings().removeClass("addMove");
        var point = new BMap.Point(x, y);
        map.centerAndZoom(point, 15);
        var myIcon = new BMap.Icon("/map/bd2.png", new BMap.Size(21, 33), {
            offset: new BMap.Size(10, 25), // 指定定位位置
        });
        var marker = new BMap.Marker(point, { icon: myIcon });        // 创建标注
        var n = i + 1;
        var label = new BMap.Label(n, {
            offset: new BMap.Size(0, 3)
        });
        label.setStyle({
            width: '21px', background: 'none', color: '#fff', border: 'none', textAlign: 'center'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
        });
        marker.setLabel(label);//显示地理名称 a
        map.addOverlay(marker);
        var content = "<p style='font-weight:600'>" + shopname + "</p><p style='line-height: 20px;'>电话：" + phone + "</p><p style='line-height: 20px;'>地址：" + shopaddr + "</p>";
        addClickHandler(content, marker);
    }
</script>

